<template>
  <h1>内置组件</h1>
  <button @click="myid = 'mycom1'">首页页</button>
  <button @click="myid = 'mycom2'">分类页</button>
  <button @click="myid = 'mycom3'">购物车</button>
  <button @click="myid = 'mycom4'">个人页</button>

  <!-- 原始人的方法 能用但不推荐(因为多的时候容易写错,看着乱) -->
  <!-- <mycom1 v-if="myid === 'mycom1'"></mycom1>
  <mycom2 v-if="myid === 'mycom2'"></mycom2>
  <mycom3 v-if="myid === 'mycom3'"></mycom3>
  <mycom4 v-if="myid === 'mycom4'"></mycom4> -->

  <!-- 垃圾方法这么写还不如直接用第一种方法"我还没实现垃圾方法" -->
  <!-- <component is="mycom1"></component>
  <component is="mycom2"></component>
  <component is="mycom3"></component>
  <component is="mycom4"></component> -->

  <!-- 给is添加动态属性 里面直接写键名就可以实现点的是那个组件就可以出来那个了 -->
  <!-- 这么写的话里面书写的数据不会进行储存 -->
  <!-- <component :is="myid"></component> -->

  <!-- 
    内部组件keep-alive
         内部可以书写多个组件, 可以让内部书写的所有组件, 全都具有缓存性
                也就是组件切换后, 对组件内部的一些操作, 会被保存下来

    当前组件还有两个属性, 两个属性的属性值是一个数组
            include, 内部包含具有缓存性的组件名
            exclude, 内部包含不具有缓存性的组件名

    组件名需要是 组件内部的 name 属性
   -->
  <keep-alive :include="['MyCom3','MyCom4']">
    <component :is="myid"></component>
  </keep-alive>
  
</template>

<script>
// 引入
import mycom1 from './components/mycom1.vue';
import mycom2 from './components/mycom2.vue';
import mycom3 from './components/mycom3.vue';
import mycom4 from './components/mycom4.vue';

// 操作
export default {
  data(){
    return{
      myid:"mycom1",
    }
  },
  components:{
    mycom1,
    mycom2,
    mycom3,
    mycom4
  }
}
</script>